<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../../Templates/SubFolderTemplate.xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="head-title">
        <title>Edit Raw Material Purchasing Order | Merlion's ERP System</title>
    </ui:define>
    
    <ui:define name="content">
        <f:view beforePhase="#{editMaterialOrder.initView}">
            <h:form prependId ="false">
                <p:panel id="panel" header="Update Raw Material Purchasing Order">
                    <p:ajaxStatus style="width:16px;height:16px;">
                        <f:facet name="start">
                            <p:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" /> 
                        </f:facet>

                        <f:facet name="complete">
                            <h:outputText value=""/>
                        </f:facet>
                    </p:ajaxStatus>
                    
                    <p:messages id="message"/>
                    <h:outputLabel for="materialOrderId" style="font-weight: bold" value="Material Order ID: "/>
                    <h:outputText value="#{editMaterialOrder.materialOrderToEdit.materialOrderId}" id="materialOrderId"/>
                    <p:message for="materialOrderId"/>  
                    
                    <h:outputText value="Supplier: " style="font-weight: bold"/>
                    <h:outputText value="#{editMaterialOrder.materialOrderToEdit.supplier.supplierName}"/>
                    
                    <p:spacer height="30"/>
                    <p:dataTable var="materialLine" value="#{editMaterialOrder.list}"
                                 dynamic="true" paginator="true" emptyMessage="No Material Line" id ="materialLineTable"
                                 selection="#{editMaterialOrder.selectedMaterialLine}">
                        
                        <p:column selectionMode="single"/>
                        
                        <p:column sortBy="#{materialLine.rawMaterial.materialType}">
                            <f:facet name="header">
                                <h:outputText value="Raw Material Type"/>
                            </f:facet>
                            <h:outputText value="#{materialLine.rawMaterial.materialType}"/>
                        </p:column>

                        <p:column sortBy="#{materialLine.rawMaterial.lotSize}">
                            <f:facet name="header">
                                <h:outputText value="Lot Size ( * Lot Quantity )"/>
                            </f:facet>
                            <h:outputText value="#{materialLine.rawMaterial.lotSize} "/>
                        </p:column>

                        <p:column sortBy="#{materialLine.lotQuantity}">
                            <f:facet name="header">
                                <h:outputText value="Lot Quantity"/>
                            </f:facet>
                            <h:outputText value="#{materialLine.lotQuantity}"/>
                        </p:column>                  
                    </p:dataTable>
                    
                    <p:commandButton value="Add Material Line" onclick ="addMaterialLineDialog.show()" ajax="true"/>
                    <p:commandButton value="Delete Material Line" onclick="confirmation.show()" type="button"/>
                    <p:commandButton value="Remove to Material Request" update="materialLineTable message" actionListener="#{editMaterialOrder.addBack(event)}"/>
                    <p:commandButton id="btn" value="Update" update="panel message" 
                                     actionListener="#{editMaterialOrder.updateMaterialOrder}" ajax="true"/>
                </p:panel>
                
                <p:confirmDialog message="Are you sure about deleting this Material Line?"
                                 hideEffect="explode" header="Initiating delete process" severity="alter" widgetVar="confirmation">
                    <p:commandButton value="Yes" update="materialLineTable message" oncomplete="confirmation.hide()"
                                     actionListener="#{editMaterialOrder.deleteMaterialLine(event)}"/>
                    <p:commandButton value="No" onclick="confirmation.hide()" type="button"/>
                </p:confirmDialog>
                
                <p:dialog header="Add New Material Line" widgetVar="addMaterialLineDialog" width="400" height="400" resizable="true" 
                          showEffect="clip" hideEffect="fold">
                    <h:panelGrid id="display" columns="2">
                        
                        <h:outputText value="New Raw Material:"/>
                        <h:selectOneMenu id="selectedRawMaterial" value="#{editMaterialOrder.selectedRawMaterial}">
                            <f:selectItem itemLabel="Select Raw Material Type " itemValue="" />
                            <f:selectItems value="#{editMaterialOrder.materialNames}"/>
                        </h:selectOneMenu>  
                        
                        <h:outputText value="Lot Quantity:"/>
                        <h:inputText value="#{editMaterialOrder.lotQuantity}" required="true"/>
                       
                        <p:commandButton value="Add" actionListener="#{editMaterialOrder.addMaterialLine}" update="materialLineTable message1" oncomplete="addMaterialLineDialog.hide()"/>  
                        <p:messages id="message1"/>
                    </h:panelGrid>
                </p:dialog>
            </h:form>
        
        </f:view>
    </ui:define>


</ui:composition>  

